import React from 'react';
import ReactDOM from 'react-dom';
import '../../static/tero/nav.less'
import $ from 'jquery'


class Navv extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            names: [],
            index: 0,
            flag: false,
            base:[]
        }
    }
    componentWillMount() {
        this.setState({
            names: this.props.names,
            base:this.props.names,
        })
    }
    adminPop() {
        let flag = true;
        if ($('#admin')) {
            $('#admin').click(function () {
                let scale = 0;
                scale = flag ? 0 : '500px';
                $('.nav_b_right').css('transform', 'translateX(' + scale + ')');
                flag = !flag;
            })
        }
    }
    componentDidMount() {
        this.adminPop()

    }
    componentDidUpdate() {
        this.adminPop()
    }
    toggle(index) {
        this.setState({
            index: index
        })
    }
    search(e) {
        this.setState({
            base: this.state.names.filter((item) => {
                return item.includes(e.target.value)
            })
        })
    }
    render() {
        return (
            <div className='tero_nav'>
                <div className='left'><img src={require('../../static/image/left_icon.png')} alt="" /></div>
                <div className='right'><img src={require('../../static/image/gd.png')} alt="" onClick={() => {
                    this.setState({
                        flag: !this.state.flag
                    })
                }} />
                    <div className={this.state.flag ? 'right_son active' : 'right_son'}>
                        <input type="text" placeholder='请输入内容' onChange={(e) => { this.search(e) }}/>
                        <div className='right_son_bottom'>
                            <ul>
                                {this.state.base.map((item, index) => {
                                    return (<li onClick={() => { this.toggle(index) }} key={index} className={this.state.index == index ? 'active_li' : ''}>{item}</li>)
                                })}
                            </ul>
                        </div>
                    </div>
                </div>
                <ul className='nav'>
                    {this.state.names.map((item, index) => {
                        return (<li key={index} onClick={() => { this.toggle(index) }} className={this.state.index == index ? 'active_li' : ''}>{item}</li>)
                    })}

                </ul>
            </div>
        )
    }
}
export default Navv